<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2023-03-04 15:57:36
 * @LastEditors: rendc
 * @LastEditTime: 2023-03-05 10:34:07
-->
<script setup>
import { ref } from "vue";
import IndexView from "@/views/IndexView.vue"
import ClassifyView from "@/views/ClassifyView.vue"
import ShopcarView from "@/views/shoppingCarView.vue"
import MeView from "@/views/MyView.vue"

const active = ref(0);

</script>

<template>
  <IndexView v-if="active == 0" />
  <ClassifyView v-if="active == 1"/>
  
  <MeView v-if="active == 3"/>
    <van-tabbar v-model="active"  active-color="#845f3f" inactive-color="#666666">

    
      <van-tabbar-item >
        <span>首页</span>
        <template #icon="props">
          <div class="imgIcon"
        :class="props.active?'indexActive':'indexInactive'">
        </div>
        </template>
    </van-tabbar-item>
  
    <van-tabbar-item>
        <span>分类</span>
        <template #icon="props">
          <div class="imgIcon"
        :class="props.active?'classifyActive':'classifyInactive'">
        </div>
        </template>
    </van-tabbar-item>

    
   
    <van-tabbar-item to ="shoppingCar">
        <span>购物车</span>
        <template #icon="props">
          <div class="imgIcon"
        :class="props.active?'shopcarActive':'shopcarInactive'">
        </div>
        </template>
    </van-tabbar-item>
    

    <van-tabbar-item >
        <span>我的</span>
        <template #icon="props">
          <div class="imgIcon"
        :class="props.active?'meActive':'meInactive'">
        </div>
        </template>
    </van-tabbar-item>

    </van-tabbar>
</template>
<style lang="less" scoped>
.imgIcon{
  width: 24px;
  height: 24px;
  background-size: 24px !important;
}
@HEIGHT:-24px;
.indexActive{
  background: url(../assets/daohang.png) 0px 1 * @HEIGHT;
}
.indexInactive{
  background: url(../assets/daohang.png)
}
.classifyActive{
  background: url(../assets/daohang.png) 0px 3 * @HEIGHT;
}
.classifyInactive{
  background: url(../assets/daohang.png) 0px 2 * @HEIGHT
}
.shopcarActive{
  background: url(../assets/daohang.png) 0px 5 * @HEIGHT;
}
.shopcarInactive{
  background: url(../assets/daohang.png) 0px 4 * @HEIGHT
}

.meActive{
  background: url(../assets/daohang.png) 0px 9 * @HEIGHT;
}
.meInactive{
  background: url(../assets/daohang.png) 0px 8 * @HEIGHT
}
</style>
